<template>
  <el-card class="comment">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="goodsName" label="图书" min-width="100"> </el-table-column>
      <el-table-column prop="price" label="价格" min-width="100">
        <template v-slot="{ row }">
          <el-tag type="danger" effect="plain">{{ row.price | $ }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="100">
        <template v-slot="{ row }">
          <el-tag :type="orderState[row.status].type">{{ orderState[row.status].label }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="购买时间" min-width="100">
        <template v-slot="{ row }">
          {{ row.createTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="100">
        <template v-slot="{ row }">
          <el-popconfirm title="将派送图书" @confirm="handleOrder(row, 1)">
            <el-link type="primary" :disabled="row.status !== 0" slot="reference" style="margin-right:10px;">
              图书派送</el-link>
          </el-popconfirm>
          <el-popconfirm title="确认图书送达？" @confirm="handleOrder(row, 2)">
            <el-link type="success" :disabled="row.status !== 1" slot="reference" style="margin-right:10px;">
              图书送达</el-link>
          </el-popconfirm>
          <el-link type="danger" @click="deleteById($api.deleteGoodsOrder, fetchOrder, row.id, '支付记录')"> 删除记录</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!--  -->
    <el-pagination @size-change="handleSizeChange($event, fetchOrder)"
      @current-change="handleCurrentChange($event, fetchOrder)" :page-sizes="[1, 2, 5, 10]"
      layout="total,sizes, prev, pager, next" :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
import mixin from '@mixins'

import { orderState } from '@static'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      tableData: [],
      orderState
    }
  },
  mixins: [mixin.admin],
  methods: {
    async fetchOrder () {
      const { list } = await this.$api.getGoodsOrderList(this.query)
      console.log(list)
      this.tableData = list
    },

    async handleOrder (i, status) {
      const { success } = await this.$api.editGoodsOrder({ id: i.id, status })
      this.handleSuccess(success, ['', '派送', '送达'][status], this.fetchOrder)
    }
  },
  computed: {
    ...mapGetters(['getUserById', 'getBookById']),
    filterTableData () {
      return this.tableData
    }
  },
  mounted () {
    this.fetchOrder()
  }
}
</script>
<style lang="less">
@import '~@css/acommon.less';
</style>
